<template>
  <div class="register">
    <div class="back">
      <img src="../assets/image/left.png" alt="" @click="$router.go(-1)" />
    </div>
    <div class="bg">
      <img src="/mine/bg.png" />
    </div>
    <div class="reg_box">
      <van-cell-group>
        <van-field
          v-model="username"
          placeholder="请输入4~12位用户名"
          label="用户名"
          label-width="4.2em"
          maxlength="12"
          @blur.native.capture="checkUname"
          :error="errorName"
        >
        </van-field>
        <van-field
          v-model="password"
          type="password"
          placeholder="请输入6~16位密码"
          label="密码"
          label-width="4.2em"
          maxlength="16"
          @blur.native.capture="checkUpwd"
          :error="errorPwd"
        ></van-field>
        <van-field
          v-model="repassword"
          type="password"
          label="确认密码"
          label-width="4.2em"
          @blur.native.capture="checkRepwd"
          :error="errorRepwd"
        ></van-field>
        <van-field
          v-model="phone"
          label="手机号"
          label-width="4.2em"
          @blur.native.capture="checkPhone"
          :error="errorPhone"
        ></van-field>
        <van-field
          v-model="yzm"
          center
          clearable
          placeholder="请输入短信验证码"
          @blur.native.capture="checkYzm"
        >
          <template #button>
            <van-button class="send_yzm" @click="sendNotify"
              >发送验证码</van-button
            >
          </template>
        </van-field>
      </van-cell-group>
      <!-- 验证码弹窗 -->
      <van-notify
        v-model="showYzm"
        type="success"
        style="
          background-color: rgba(0, 0, 0, 0.7);
          height: 55px;
          border-radius: 0 0 10px 10px;
          font-size: 18px;
        "
      >
        <van-icon name="bell" style="margin-right: 4px" />
        <span>短信验证码为:{{ yzm }}</span>
      </van-notify>
    </div>
    <!-- 用户协议 -->
    <van-checkbox
      v-model="checked"
      shape="square"
      checked-color="#ee0a24"
      class="check_box"
      @click="isAgree"
      >我已阅读并同意<a style="color: #f5b400" @click="show = true"
        >用户协议</a
      ></van-checkbox
    >
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div>
            <p>
              尊敬的用户，欢迎使用由深圳市中其信息技术有限公司（下列简称为“中其”或“中其信息”）提供的服务。在使用前请您阅读如下服务协议，使用本应用即表示您同意接受本协议，本协议产生法律效力，特别涉及免除或者限制中其责任的条款，请仔细阅读。如有任何问题，可向中其信息咨询。
            </p>
            <strong>1. 服务条款的确认和接受</strong>
            <p>
              通过访问或使用本应用，表示用户同意接受本协议的所有条件和条款。
            </p>
            <strong> 2.服务条款的变更和修改</strong>
            <p>
              中其信息有权在必要时修改服务条款，服务条款一旦发生变更，将会在重要页面上提示修改内容。如果不同意所改动的内容，用户可以放弃获得的本应用信息服务。如果用户继续享用本应用的信息服务，则视为接受服务条款的变更。本应用保留随时修改或中断服务而不需要通知用户的权利。本应用行使修改或中断服务的权利，不需对用户或第三方负责。
            </p>
            <strong> 3.服务内容</strong>
            <p>
              本服务的具体内容由中其信息根据实际情况提供，中其信息可以对其提供的服务予以变更，且中其信息提供的服务内容可能随时变更。该软件属于免费应用，用户使用过程中，本软件不会以任何方式、名义收取任何费用。
            </p>
            <strong>4.用户信息公开情况说明</strong>
            <p>
              尊重用户个人隐私是中其信息的一项基本政策。所以，中其不会在未经合法用户授权时公开、编辑或透露其注册资料及保存在本应用中的非公开内容，除非有下列情况。为了改善中其信息软件的技术和服务，向用户提供更好的服务体验，中其信息或可会自行收集使用或向第三方提供用户的非个人隐私信息。
            </p>
          </div>
          <van-button @click="checkAgree">同意协议</van-button>
        </div>
      </div>
    </van-overlay>
    <van-button class="btnReg" :disabled="!checked" @click="toReg"
      >注册</van-button
    >
    <van-divider solid class="p">选择其他方式注册</van-divider>
    <div class="icon">
      <div class="icon_box">
        <img src="../assets/image/QQ.png" alt="" />
      </div>
      <div class="icon_box">
        <img src="../assets/image/weixin.png" alt="" />
      </div>
      <div class="icon_box">
        <img src="../assets/image/weibo.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",
      password: "",
      repassword: "",
      phone: "",
      yzm: "",
      showYzm: false,
      checked: false,
      show: false,
      errorName: false,
      errorPwd: false,
      errorRepwd: false,
      errorPhone: false,
    };
  },
  methods: {
    // 验证用户名
    checkUname() {
      let exp = /^[A-Za-z0-9_\-\u4e00-\u9fa5]{4,12}$/;
      if (exp.test(this.username) && this.username != "") {
        this.errorName = false;
        return true;
      } else {
        this.errorName = true;
        Toast({
          message: "用户名格式不正确",
          position: "bottom",
        });
        return false;
      }
    },
    // 验证密码
    checkUpwd() {
      let exp = /^\w{6,16}$/;
      if (exp.test(this.password) && this.password != "") {
        this.errorPwd = false;
        return true;
      } else {
        this.errorPwd = true;
        Toast({
          message: "密码格式不正确",
          position: "bottom",
        });
        return false;
      }
    },
    // 验证确认密码
    checkRepwd() {
      if (this.repassword === this.password) {
        this.errorRepwd = false;
        return true;
      } else {
        this.errorRepwd = true;
        Toast({
          message: "密码不一致",
          position: "bottom",
        });
        return false;
      }
    },
    // 验证手机号
    checkPhone() {
      let exp = /^1[34578]\d{9}$/;
      if (exp.test(this.phone) && this.phone != "") {
        this.errorPhone = false;
        return true;
      } else {
        this.errorPhone = true;
        Toast({
          message: "手机格式不正确",
          position: "bottom",
        });
        return false;
      }
    },
    // 验证码
    checkYzm() {
      let exp = /^\d{4}$/;
      if (exp.test(this.yzm) && this.yzm != "") {
        return true;
      } else {
        Toast({
          message: "验证码不正确",
          position: "bottom",
        });
        return false;
      }
    },
    // 发送验证码
    sendNotify() {
      Toast.success("已发送验证码");
      let sj_yzm = Math.floor(Math.random() * 10000);
      setTimeout(() => {
        if (100 <= sj_yzm && sj_yzm < 1000) {
          this.yzm = sj_yzm * 10;
        } else if (sj_yzm < 100) {
          this.yzm = sj_yzm * 100;
        } else {
          this.yzm = sj_yzm;
        }
        this.showYzm = true;
      }, 3000);
      setTimeout(() => {
        this.showYzm = false;
      }, 6000);
    },
    // 验证用户协议
    checkAgree() {
      this.show = false;
      this.checked = true;
    },
    isAggree() {
      this.checked = !this.checked;
    },
    // 提交注册
    toReg() {
      if (
        this.checkUname() &&
        this.checkUpwd() &&
        this.checkRepwd() &&
        this.checkPhone() &&
        this.checkYzm()
      ) {
        let params = `username=${this.username}&password=${this.password}&phone=${this.phone}`;
        this.axios.post("/usersreg/register", params).then((res) => {
          if (res.data.code == 200) {
            Toast.success("注册成功");
            setTimeout(() => {
              this.$router.push("/login");
            }, 1000);
          } else if (res.data.code == 201) {
            Toast.fail("用户名或手机号已存在");
          } else {
            Toast.fail("注册失败");
          }
        });
      } else {
        Toast.fail("填写信息有误");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  text-align: center;
  position: relative;
  .back {
    position: absolute;
    left: 4vw;
    top: 2vh;
    width: 30px;
    img {
      width: 100%;
    }
  }
  .bg {
    width: 100vw;
    border-radius: 10px;
    img {
      width: 100%;
      height: 45vh;
      border-radius: 0 0 40px 0;
    }
  }
  .reg_box {
    position: fixed;
    top: 8vh;
    left: 10vw;
    margin: 0 auto;
    width: 80vw;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba($color: #000, $alpha: 0.15);
    .van-hairline--top-bottom::after {
      border: 0;
    }
    div {
      border-radius: 20px;
      div {
        padding: 3.2vh 3.5vh;
        font-size: 16px;
      }
      .send_yzm {
        padding: 0;
        background-color: #f5b400;
        color: #fff;
        width: 25vw;
        border: 0;
        .van-button__content {
          padding: 0;
          font-size: 14px;
        }
      }
    }
  }
  .btnReg {
    position: fixed;
    top: 68vh;
    left: 10vw;
    background-color: #f5b400;
    color: #fff;
    border-radius: 10px;
    width: 80vw;
    height: 48px;
    font-size: 16px;
    outline: none;
  }
  .check_box {
    position: fixed;
    top: 63vh;
    left: 12vw;
    font-size: 14px;
  }
  .block {
    width: 90vw;
    height: 90vh;
    margin: 5vh auto;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    letter-spacing: 1px;
    text-indent: 30px;
    div {
      height: 75vh;
      overflow: auto;
      p {
        padding: 6px 20px;
        color: #333;
        font-size: 14px;
        text-align: left;
      }
    }
    button {
      position: absolute;
      bottom: 20px;
      left: 38%;
      background-color: #f5b400;
      color: #fff;
      div {
        height: 40px;
      }
    }
  }
  .p {
    position: fixed;
    left: 10vw;
    bottom: 14vh;
    color: #666;
    width: 80vw;
    text-align: center;
    font-size: 12px;
  }
  .icon {
    position: fixed;
    bottom: 6vh;
    display: flex;
    justify-content: center;
    width: 100vw;
    text-align: center;
    .icon_box {
      width: 60px;
      height: 60px;
      border-radius: 30%;
      margin: 0 15px;
      box-shadow: 0 10px 20px rgba($color: #000, $alpha: 0.15);
      display: flex;
      align-items: center;
      img {
        width: 60%;
        display: block;
        margin: 0 auto;
      }
    }
  }
}
</style>